<template>
  <div>
    <component
      v-bind:is="currentTabComponent"
      title="银行卡管理"
      :showBackBtn="true"
    >
      <a-icon type="plus" slot="action" @click="addBankCardModal" />
      <div slot="content" class="wrapper">
        <a-button
          v-if="isPC"
          type="primary"
          @click="addBankCardModal"
          style="margin-bottom: 20px"
          ><a-icon type="plus" /> 新增银行卡</a-button
        >
        <bank-list ref="bankList"></bank-list>
      </div>
    </component>
    <add-bank-card
      :visible="visible"
      @close="handleCancel"
      @submit="handleSubmit"
      ref="addCard"
    ></add-bank-card>
  </div>
</template>

<script>
export default {
  name: "mobile",
  components: {
    contentWrapper: () => import("@/components/contentWrapper/index"),
    tab: () => import("@/components/contentWrapper/pcIndex"),
    bankList: () => import("@/components/personList/bankList"),
    addBankCard: () => import("@/components/personList/addBankCard")
  },
  data() {
    return {
      visible: false
    };
  },
  methods: {
    addBankCardModal() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
      this.$refs.addCard.handleReset();
    },
    handleSubmit() {
      this.handleCancel();
      this.$refs.bankList.getCardList();
    }
  },
  computed: {
    currentTabComponent() {
      if (this.$store.state.isPC) {
        return "tab";
      } else {
        return "contentWrapper";
      }
    },
    isPC() {
      return this.$store.state.isPC;
    }
  }
};
</script>

<style scoped lang="less">
.wrapper {
  padding: 0 16px;
}
</style>
